<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <script src="./js/echarts5.4.0.js"></script>
</head>
<body>
<h1>本月支出</h1>
<div id="chartBarContainer" style="width: 400px; height: 300px;"></div>

<div id="chartPieContainer" style="width: 400px; height: 300px;"></div>

</body>
<script>
    function initBarChart(chartData) {
      const data = JSON.parse(chartData);

      var chartContainer = document.getElementById('chartBarContainer');
      var chart = echarts.init(chartContainer);

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: data.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data.seriesData,
          type: 'bar',
          showBackground: true,
          stack: 'Total',
          label: {
            show: true,
            position: 'top'
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
              ])
            }
          },
          itemStyle: {
            borderRadius: [25, 25, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          }
        }]
      };

      chart.setOption(option);
    }

    function initPieChart(chartData) {
      const data = JSON.parse(chartData);

      var chartContainer = document.getElementById('chartPieContainer');
      var chart = echarts.init(chartContainer);

      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false,
          top: '5%',
          left: 'center'
        },
        series: [{
          data: data.seriesData,
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          startAngle: 180,
          labelLine: {
            show: true,
            length: 20, // 标签线的长度
            length2: 50 // 标签线的第二段长度
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          }
        }]
      };

      chart.setOption(option);
    }

</script>
</html>